<style scoped>
.tellme {
    color: #1890ff;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}
.title{
   

}

</style>
<style>
.mb30 {
    margin-bottom: 30px;
}

.mt20 {
    margin-top: 20px;
}

.center {
    text-align: center;
}
.addmodal .el-dialog__title{
 font-size: 20px !important;
    font-weight:bold !important;
}
</style>

<template>
<el-card id="title">
    <el-row :gutter="20" class="mb30">
        <el-col :span="12">
            <el-col :span="18">
                <el-input type="text" v-model="indexForm.wd" clearable></el-input>
            </el-col>
            <el-col :span="6">
                <el-button type="primary"   @click="getList">搜索</el-button>
            </el-col>
        </el-col>
        <el-col :span="12" style="text-align:right;" v-if="this.role == '5ad5cac1d8219eca40241aa8'">
            剩余入住额度:{{surplusinto}}&emsp;(<span @click="centerDialog = true" class="tellme">联系扩容</span>)&emsp;
            <el-button type="primary" @click="add">新增入驻</el-button>
        </el-col>

    </el-row>
    <el-row :gutter="20">
        <el-col>
            <el-table :data="tableData" style="width:100%;">
                <el-table-column prop="manufactureName" label="品牌" width="180"  :show-overflow-tooltip="true" align="center"></el-table-column>
                <el-table-column prop="" label="类目" width="180" :render-header="typeHeader" :show-overflow-tooltip="true" align="center"></el-table-column>
                <el-table-column prop="productName" label="牌号" :show-overflow-tooltip="true" align="center"></el-table-column>
                <el-table-column prop="name" label="产品名称" :show-overflow-tooltip="true" align="center"></el-table-column>
                <el-table-column label="操作" width="180" align="center" v-if="this.role == '5ad5cac1d8219eca40241aa8'">
                    <template slot-scope="scope">
                        <el-button size="mini" type="danger"  @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination @current-change="getList" :current-page.sync="indexForm.page" layout="prev, pager, next" :total="total" class="mt20 center" :page-size="20">
            </el-pagination>
        </el-col>
    </el-row>
    <el-dialog title="新增入驻产品" :visible.sync="centerDialogVisible" width="60%" center class="addmodal">
        <el-row>
            <el-col :span="8">
                <el-input type="text" v-model="searchform.wd" clearable></el-input>
            </el-col>
            <el-col :span="12">
                &emsp;<el-button type="primary" @click="searchclick" >搜索</el-button>
            </el-col>
            <el-col class="mt20">
            <el-table :data="tableData1" style="width:100%;" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="manufactureName" label="品牌" width="180" sortable :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="templatename" label="类目" width="180" sortable :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="productName" label="牌号" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="name" label="产品名称" :show-overflow-tooltip="true"></el-table-column>
            </el-table>
            <el-pagination 
            @current-change="searchclick" 
            layout="prev, pager, next" 
            :total="searchtotal" 
            :page-size="20" 
            class="mt20 center" 
            :current-page.sync="searchform.page">
            </el-pagination>
            <!-- <el-pagination
                @current-change="fetchData('desc')"
                :current-page.sync="form.page"
                :page-size="form.pagesize"
                layout="prev, pager, next"
                :total="form.total">
            </el-pagination> -->
        </el-col>
        </el-row>
        <span slot="footer" class="dialog-footer">
            <el-button @click="centerDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addPro">确认入驻</el-button>
        </span>
    </el-dialog>

    <el-dialog title="联系扩容" :visible.sync="centerDialog" width="60%" center class="addmodal">
        <el-row >
            <div style="width:100% text-algin:center">
                <el-form label-width="80px" label-position="left" style="margin:0 auto"  class=" px-0 w-1/2  introduce-edit__item">
                    <el-form-item label="联系人">
                        <el-input  v-model="form.name" placeholder="请输入联系人姓名"></el-input>
                    </el-form-item>


                    <el-form-item label="联系方式">
                        <el-input v-model="form.telephone" placeholder="请输入联系方式"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            
        </el-row>
        <span slot="footer" class="dialog-footer">
            <el-button @click="centerDialog = false">取 消</el-button>
            <el-button type="primary" @click="addVol">联系扩容</el-button>
        </span>
    </el-dialog>


</el-card>
</template>


<script>
import {
    Pagination,
    Input,
    Row,
    Col,
    Table,
    TableColumn,
    Dialog,
    Form,
    FormItem
} from 'element-ui'
export default {
    data() {
        return {
            total:0,
            searchtotal:0,
            centerDialogVisible:false,
            tableData:[],
            tableData1:[],
            page:1,
            pagesize:20,
            searchform:{
                wd:'',
                page:1,
                pagesize:10,
            },
            surplusinto:0,
            selected:[],
            form: {},
            indexForm:{
                wd:'',
                page:1,
                pagesize:20,
            },
            centerDialog:false,
            categoriesList:[]
        }
    },
    components: {
        ElPagination: Pagination,
        ElInput: Input,
        ElRow: Row,
        ElCol: Col,
        ElTbale: Table,
        ElDialog:Dialog,
        ElForm: Form,
        ElFormItem: FormItem,
    },
    watch: {
        'indexForm.wd'(val) {
                if (!val) this.getList();
        },
        'searchform.wd'(val) {
                if (!val) this.searchclick();
        }  
    },
    computed: {
        role() {
            return SessionStore.get('loginMesg').role;

            // // 企业用户、品牌管理员、超级管理员
            // let arr = ['5ad5cac1d8219eca40241aa8', '5ad812751b03e49386ae960c','5ab07114076547341878f520', '570b6c19d3bebd0c4d09b7ba'];
            // return arr.findIndex(el => el === role) < 0 ? 0 : arr.findIndex(el => el === role) + 1 ;
        } 
    },
    created(){
        this.getList();
        this.intolimit();
        this.searchclick();
        this.getCategories();
    },
    methods:{
        typeHeader(h, { column, $index }){
            return h('span', {}, [
                h('span', {}, column.label),
                h('el-popover', { props: {  placement: 'bottom', width: '350', trigger: 'click', }},
                    [   
                        h('el-collapse',{
                            props:{
                                accordion:true
                            }
                        },[
                            h('el-collapse-item',{
                                props:{title:'不限'},                               
                            },
                            [
                                h('li',{
                                'class':'list-reset cursor-pointer px-2 my-1',
                                'style':{color:'#3D4852'},
                                on:{
                                    click:()=>{
                                        this.indexForm.vcatid = ''
                                        this.getList('desc');
                                        document.querySelector("#title").click();
                                    }
                                }
                                },'不限')
                            ]
                               
                        ),
                        ].concat(
                            this.categoriesList.map(item=>{
                                return  h('el-collapse-item',{props:{title:item.cnname}},
                                        
                                        [
                                            h('ul',{'class':'list-reset'},
                                            item.nodes&&item.nodes.length > 0 ? item.nodes.map(sitem=>{
                                                return  h('li',{
                                                    'class':'list-reset cursor-pointer px-2 my-1',
                                                    'style':{color:'#3D4852'},
                                                    on:{
                                                        click:()=>{
                                                            this.indexForm.vcatid = sitem.id
                                                            this.getList('desc');
                                                            document.querySelector("#title").click();
                                                        }
                                                    }
                                                    },sitem.cnname)
                                            }) : []
                        
                                            )
                                        ]
                                        )
                            })
                        )
    
                        ),
                        h('i', { 'class':'el-icon-arrow-down' ,'style':{cursor: 'pointer'},slot: 'reference', props: { }}, '')
                    ])
            ])
        },
        getCategories(){
            // API.get('categories?catid=8a99e4025aff0268015aff2369c50000',).then(res=>{
            //     console.log(res)
            //     this.categoriesList = res
            // })
            let _params = {
                role:this.role,
                wd:this.indexForm.wd
            }
            API.post('products/search/vcats',_params).then(res=>{
                console.log(res)
                this.categoriesList = res.rows
            })
        },
        addVol(){
            this.form.type = '联系扩容'
            this.form.desc = '申请企业产品入驻扩容'
            API.post('manage/advertisement',this.form).then(res=>{
                Ele.$message.success('操作成功！');
            }).catch(err => {
                Ele.$message.error('操作失败！');
            })
            .finally(() => {
                this.centerDialog = false;
                
            });
        },
        addPro(){
            const _ids = this.selected.map(item=>{
                return item._id
            })
            let _parmas = {
                productIds:_ids.join(',')
            }
            API.post('/product/expert',_parmas).then(res=>{
                Ele.$message.success('操作成功');
                setTimeout(()=>{
                    this.getList()
                },2000)
                
                this.centerDialogVisible = false;
            })
        },
        add(){
            this.centerDialogVisible = true;
        },
        getList(){
            let _url = '/products/search'
            let _type = 'post'
            this.indexForm.role = this.role
            API[_type](_url,this.indexForm).then(res=>{
                
                this.tableData = res.rows;
                this.total = res.total
                
                
            }).catch(err => {
                Ele.$message.error(err.status.msg);
            })
            .finally(() => {
                this.getCategories()
            });
        },
        handleSelectionChange(val){
            console.log(val)
            this.selected = val
        },
        pagechange(val){

        },
        searchclick(){
            API.post('/products/search',{
                page:this.searchform.page,
                pagesize:this.searchform.pagesize,
                wd:this.searchform.wd,
            }).then(res=>{
                //this.searchform.page=1;
                this.searchtotal = res.total;
                this.tableData1 = res.rows;
            })
        },
        intolimit(){
            API.get('/product/expert/limit').then(res=>{
                this.surplusinto = res.total*1-res.num*1;
            })
        },
        handleDelete(index, row){
            Ele.$confirm('此操作将永久删除该文件, 是否继续?','提示',{
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(()=>{
                let ids =row._id;
                let data= {
                    productid:ids
                };
                //data.ids= JSON.stringify(data.ids);
                API.delete('/product/expert/by/productid',{
                    data:data
                }).then(res=>{
                    Ele.$message.success('操作成功');
                    setTimeout(()=>{
                        this.getList()
                    },2000)
                    
                })
            }).catch(()=>{
            })
        }

    }
}
</script>